<template>
  <a-drawer
    title="特效"
    :width="430"
    :visible="visible"
    :footer-style="{ textAlign: 'right' }"
    @close="onClose"
  >
    <div class="title">
      当前选中效果：{{ currentKey ? matchData.effects[currentKey] : "暂无" }}
      <a-button v-if="currentKey" @click="currentKey = ''" type="link"
        >清除</a-button
      >
    </div>
    <div class="transition_con">
      <div
        class="transition_item"
        v-for="(item, index) in transitionList"
        :key="index"
      >
        <div class="transition_name">{{ item.name }}</div>

        <div class="material_con">
          <div
            class="material_item"
            @click.stop="chooseThis(material_item)"
            v-for="(material_item, material_index) in item.materials"
            :key="material_index"
          >
            <div
              class="material_image"
              :class="currentKey == material_item.scene_type ? 'active' : ''"
            >
              <video
                @mouseout="(value) => handleMouseOut(value)"
                @mouseenter="(value) => handleMouseIn(value)"
                :src="material_item.material_url"
                alt=""
              />
            </div>
            <div class="material_name">
              {{ material_item.material_name }}{{ material_item.show }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <template #footer>
      <a-space>
        <a-button @click="onClose">取消</a-button>
        <a-button type="primary" @click="handleSubmit">提交</a-button>
      </a-space>
    </template>
  </a-drawer>
</template>

<script>
import matchData from "./match_data.js";
import { defineComponent, reactive, ref, toRefs, watch, nextTick } from "vue";
import { message } from "ant-design-vue";
import request from "@/common/utils/request.js";

function getEffects() {
  return request.get("/work_ai", "/user/shotstack/material/effects/list");
}

export default defineComponent({
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    specialKey: {
      type: String,
      default: "",
    },
  },

  emits: ["close"],

  setup(props, context) {
    const state = reactive({
      currentKey: "",
      transitionList: [],
    });

    const onClose = () => {
      context.emit("close", "close");
    };

    const handleSubmit = () => {
      context.emit("close", state.currentKey);
    };

    const getTransitionList = () => {
      getEffects().then((res) => {
        state.transitionList = res.result;
      });
    };

    const chooseThis = (item) => {
      if (state.currentKey == item.scene_type) return;
      state.currentKey = item.scene_type;
    };

    const handleMouseOut = (e) => {
      e.target.currentTime = 0;
      e.target.pause();
    };

    const handleMouseIn = (value) => {
      value.target.currentTime = 0;
      value.target.play();
    };

    watch(
      () => props.visible,
      (val) => {
        if (val) {
          getTransitionList();
        }
        if (val && props.specialKey) {
          state.currentKey = props.specialKey;
        }
      }
    );

    return {
      ...toRefs(state),
      onClose,
      chooseThis,
      handleSubmit,
      handleMouseIn,
      matchData,
      handleMouseOut,
    };
  },
});
</script>

<style lang="less" scoped>
.title {
  height: 30px;
  display: flex;
  align-items: center;
  color: #333;
  font-weight: bold;
  font-size: 14px;
}
.transition_con {
  width: 100%;

  .transition_item {
    margin-top: 10px;

    .transition_name {
      color: #333;
      font-weight: bold;
      font-size: 14px;
    }

    .material_con {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      margin-top: 10px;

      .material_item {
        margin-top: 5px;
        cursor: pointer;
        width: 32%;
        .material_image {
          width: 100%;
          height: 70px;
          border-radius: 5px;
          border: 2px solid transparent;

          &.active {
            border: 2px solid #40dde7;
          }

          video {
            width: 100%;
            height: 100%;
            border-radius: 5px;
            overflow: hidden;
            filter: grayscale(0.1);
          }
        }

        .material_name {
          color: #666;
          margin-top: 5px;
          font-size: 12px;
        }
      }
    }
  }
}
</style>
